<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- <link rel="stylesheet" href="../../../styles/index.css"> -->

	<style>
		/* icon图标 */
		.icon {
			width: 1em;
			height: 1em;
			vertical-align: -0.15em;
			fill: currentColor;
			overflow: hidden;
		}

		body {
			margin: 0;
			background-color: #f4f6f9;
		}

		ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		button {
			border: none;
			padding: 0;
			margin: 0;
		}

		a {
			text-decoration: none;
			color: #000;
		}

		a:hover {
			font-weight: 700;
		}

		.zhihu-container {
			height: 50px;
			background-color: white;
			box-shadow: 0 3px 10px #1771F6;
		}

		.zhihu-container .header {
			max-width: 1156px;
			min-width: 1000px;
			padding: 0 35px;
			margin: 0 auto;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.header .header-logo {
			width: 64px;
			font-size: 26px;
			margin-right: 20px;
		}

		.header-logo a {
			color: #1771F6;
		}

		.header .header-nav {
			margin-right: 20px;
		}


		.header-nav ul {
			display: flex;
		}

		.header-nav ul li {
			height: 50px;
			line-height: 50px;
			padding: 0 15px;
		}

		.header-nav ul li a {
			font-size: 15px;
			color: #8491a5;
		}

		.header .header-search {
			flex-grow: 1;
			background-color: #F8F8FA;
			border-radius: 100px;
			padding: 10px 15px;
			margin-right: 20px;

			display: flex;
			align-items: center;
		}

		.header-search input {
			flex-grow: 1;

			font-size: 13px;
			border: none;
			outline: none;
			background: none;
		}

		.header-search .icon.search {
			font-size: 16px;
			color: #748195;
			cursor: pointer;
		}

		.header-search input:focus+.icon.search {
			color: #1771F6;
		}

		.header .header-login {}

		.header-login button {
			width: 90px;
			height: 34px;
			font-size: 14px;
			cursor: pointer;
		}

		button.no-border {
			background-color: transparent;
			color: #8491a5;
		}

		button.no-border:hover {
			font-weight: 700;
		}

		button.primary {
			background-color: #1771F6;
			color: white;
			opacity: .96;

		}

		button.primary:hover {
			opacity: 1;
		}
	</style>
</head>

<body>
	<div class="zhihu-container">
		<header class="header">
			<div class="header-logo">
				<a href="#首页">知乎</a>
			</div>
			<div class="header-nav">
				<ul>
					<li><a href="#首页">首页</a></li>
					<li><a href="#知乎知学堂">知乎知学堂</a></li>
					<li><a href="#由你来答">由你来答</a></li>
					<li><a href="#知乎直答">知乎直答</a></li>
				</ul>
			</div>
			<div class="header-search">
				<input placeholder="郑钦文晋级美网女单八强" type="text">

				<svg class="icon search" aria-hidden="true">
					<use xlink:href="#lh-icon-search"></use>
				</svg>
			</div>
			<div class="header-login">
				<button class="no-border">切换模式</button>
				<button class="primary">登录/注册</button>
			</div>
		</header>
	</div>

	<script src="../../../icons/iconfont.js"></script>
</body>

</html>